import React from 'react'
import { Trans } from 'react-i18next'
import { Form, Input, Button, Checkbox } from 'antd';
const checkContent = (rule, value, callback) => {
    const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
    if (!reg.test(value)) {
        callback('仅允许输入汉字、字母、数字和下划线');
        return;
    } else if (value && value.length > 4) {
        callback('字段名长度不能大于4！')
        return
    }
    callback()
}
function index() {
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 10 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                label="Username"
                name="username"
                type="enum"
                rules={[
                    { required: true, message: '用户名不能为空！' },// 是否必填
                    // { len: 3, },// 固定长度校验
                    // { max: 3, message: '最长3！' },// 固定长度校验
                    // { pattern: new RegExp(/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, 'g'), message: '仅允许输入汉字、字母、数字和下划线' },// 正则校验
                    {
                        validator(_, value) {
                            if (value && value.length < 9) {
                                return Promise.reject(new Error('长度不能小于9!'));
                            }
                            return Promise.resolve();
                        },
                    },// 函数校验
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="Password"
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    Submit
          </Button>
            </Form.Item>
        </Form>
    )
}

export default index
